<template>
    <div class="me">
        <div class="title">我的信息</div>
        <div class="iBox"> 
            <div class="iBox_top">
                <div class="tx">
                    <img src="../static/default_tx.png" alt="">
                </div>
                <div class="id">用户ID：<span>{{ userInfo.id }}</span> </div>
                <div class="name">昵称：{{ userInfo.username }}</div>
                <div class="password">密码：*******</div>
                <div class="age">年龄：{{ userInfo.age }}</div>
                <div class="from">地区：{{ userInfo.from }}</div>

            </div>
            <div class="iBox_right"> 
                <el-button icon="check" type="primary" style="margin: auto 0px 20px auto; width: 180px;" @click="submit()">保存</el-button>
            </div>
            <div class="iBox_left">
                <div class="descTile">修改个人信息</div>
                <el-descriptions
                    class="descBox"
                    :column="3"
                    size="default"
                    border>
                    <el-descriptions-item v-for="(item,index) in 6" :key="index">
                        <template #label>
                        <div class="cell-item">
                            <el-icon>
                                <component :is="descList[index].icon"/>
                            </el-icon>
                                {{ descList[index].name }}
                        </div>
                        </template>
                       <div class="inputBox">
                            <el-input  type="text" :disabled="notIdkeyFn(descList[index].key)" 
                            v-model="userInfo[`${descList[index].key}`]"></el-input>
                       </div>
                        
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <!-- <div class="iBox_bottom"></div>  -->
        </div> 
    </div>
    <messageComp ref="ref_messageComp"></messageComp>
  
</template>

<script setup>
import axios from 'axios'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { onMounted, ref,getCurrentInstance } from 'vue'
import messageComp from '../components/messageComp.vue'
const store = useStore()
const router = useRouter()
let ref_messageComp = ref(null)
const { ctx  } = getCurrentInstance()




onMounted(() => {
  ref_messageComp.value = ctx.$refs.ref_messageComp
})
// -----------------------------------------------------------数据
let userInfo = ref({})//用户信息
let password = ref(store.state.userInfo.password)
const descList = ref([
    {
        icon:'House',
        key:'id',
        name:'用户ID'
    },{
        icon:'user',
        key:'username',
        name:'用户名'
    }, {
        icon:'Hide',
        key:'password',
        name:'密码'
    },{
        icon:'user',
        key:'age',
        name:'年龄'
    }, {
        icon:'StarFilled',
        key:'favorite',
        name:'联系电话'
    },{
        icon:'Location',
        key:'from',
        name:'籍贯'
    },
])


// -----------------------------------------------------------函数
const submit = ()=>{
    axios({
        method:'post',
        url:store.state.url + '/users/update',
        data:userInfo.value,
    }).then(res=>{
        console.log(res);
        if (res.data.code == 200) {
            ref_messageComp.value.messageSuccess('修改成功')
        }
    }).catch(err=>{
        console.log(err);
        ref_messageComp.value.messageFail(`修改失败,${err}`)
    })
}
const notIdkeyFn = (key)=>{
    if (key == 'id') {
        return true
    } else {
        return false
    }
}
const getUserData = ()=>{
    axios({
        method:'post',
        url:store.state.url + '/users',
        data:{
            id:store.state.userInfo.id
        }
    }).then(res=>{
        console.log(res);
        if (res.data.code == 200) {
            let arr = res.data.data
            arr.password = ''
            userInfo.value = arr
          }
          }).catch(err=>{
              ref_messageComp.value.messageNetFail('网络连接失败，请检查服务器')
          })
  }
//   执行
getUserData()
</script>

<style scoped>
.me{
    width: 99%;
    height: 99%;
    position: relative;
    border: none !important;
    /* border: 1px solid red; */
}
.title{
    width: 99%;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
}
.iBox{
    margin-left: 5%;
    width: 90%;
    height: calc(100% - 48px) ;
    display: flex;
    flex-wrap: wrap;
    /* border: 2px solid ; */

}
.iBox>div{
    /* margin-top: 10px; */
    width: 46%;
    height: 46%;
    /* border: 2px solid ; */
    /* box-shadow: 0 0 10px #ccc; */
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.iBox_top>.tx{
    margin-top: 10px;
    width: 120px;
    height: 120px;
    box-shadow: 0 0 4px #ccc;
    border-radius: 50%;
    /* border: 2px solid ;  */
}
.tx>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.iBox_top>.id{
    position: absolute;
    top: 25px;
    left: 150px;
    width: 65%;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 25px;
    /* border: 2px solid ; */
}
.iBox_top>.id:hover{
    transition: all 1s;
    text-overflow: none;
    white-space: pre-wrap;
}
.iBox_top>.name{
   position: absolute;
   left: 150px;
   top: 70px;
   margin-right: 10px;
   padding-right: 100px;
   /* border: 2px solid ;  */
   height: 40px;
}
.hobby{
    position: absolute;
   right: 0px;
   top: 70px;
   color:gray;
   margin-right: 10px;
   padding-right: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   /* border: 2px solid ;  */
   height: 40px;
}
.iBox_top>.password{
    position: absolute;
    left: 150px;
    top: 120px;
    letter-spacing: 2px;
    /* border: 2px solid ; */
}
.iBox_top>div:nth-child(5){
    position: absolute;
    width: 100px;
    left: 150px;
    top: 150px;
    /* border: 2px solid ; */
}
.iBox_top>div:nth-child(6){
    position: absolute;
    width: 100px;
    right: 50px;
    top: 150px;
    /* border: 2px solid ; */
    
}
.iBox>.age{
    position: absolute;
    left: 150px;
    margin-top: 180px;
}
.iBox>.from{
    /* position: absolute; */
    width: 100px;
    left: 150px;
    margin-top: 210px;
    border: 2px solid ;
}
.iBox_left{
    width: 100% !important;
    border-top: 2px solid #ccc;
    overflow: hidden;
    /* border: 2px solid ; */
}
.descTile{
    position: absolute;
    top: 20px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: gray;
    font-weight: 600;
    letter-spacing: 2px;
    text-indent: 20px;
}
.descBox{
    position: absolute;
    top: 80px;
    width: 100%;
    height: auto;
    /* border: 2px solid ; */
}
.inputBox{
    width: 100%;
    height: 100%;
    /* background-color: #ccc; */
}
span{
    color: gray;
}
</style>